<template>
  <div class="search-page">
    <div class="search-wrapper">
      <div class="title">搜索待对账信息</div>
      <div class="condition">
        <div class="tabs">
          <div class="tab" :class="{on: curTab == 0}" @click="curTab = 0">结算人</div>
          <div class="tab" :class="{on: curTab == 1}" @click="curTab = 1">运单号</div>
          <div class="tab" :class="{on: curTab == 2}" @click="curTab = 2">网点</div>
        </div>
        <div class="time">
          <el-date-picker v-model="searchQuery.beginSearchTime" placeholder="请选择开始时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable/>
          <el-date-picker v-model="searchQuery.endSearchTime" placeholder="请选择结束时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable/>
        </div>
      </div>
      <div class="search">
        <el-select v-if="curTab == 0" class="input" placeholder="按结算人姓名、电话、公司名称进行搜索" v-model="searchQuery.settlementIdList" remote multiple reserve-keyword clearable filterable
                   :loading="settlementSearching" :remote-method="getSettlementList" @change="selectSettlement">
          <el-option v-for="settlement in settlementList" :label="settlement.linkmanName" :value="settlement.linkmanId" :key="settlement.linkmanId">
            <div>公司：{{settlement.companyName}}　/　姓名：{{settlement.linkmanName}}　/　电话：{{settlement.linkmanPhone}}</div>
          </el-option>
        </el-select>
        <el-input v-else-if="curTab == 1" class="input" placeholder="请输入运单号" v-model="searchQuery.transportNo">
          <template slot="prepend">Y</template>
        </el-input>
        <el-select v-else-if="curTab == 2" class="input" placeholder="请选择网点" v-model="searchQuery.siteIdList" multiple clearable filterable>
          <el-option v-for="site in siteList" :label="site.name" :value="site.id" :key="site.id"/>
        </el-select>
        <el-button class="btn" icon="el-icon-search" type="primary" :disabled="!canSearch" :loading="searching" @click="search"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyList as getSuggestCompanyList } from '@/api/suggestion'
import { getList as getSiteList } from '@/api/site/all'

export default {
  name: 'finance-wait-search',
  data() {
    return {
      curTab: 0,
      searchQuery: {
        beginSearchTime: '',
        endSearchTime: '',
        settlementIdList: [],
        transportNo: '',
        siteIdList: []
      },
      settlementList: [],
      siteList: [],
      searching: false,
      settlementSearching: false
    }
  },
  computed: {
    canSearch() {
      switch (this.curTab) {
        case 0:
          return this.searchQuery.settlementIdList.length > 0
        case 1:
          return !!this.searchQuery.transportNo
        case 2:
          return this.searchQuery.siteIdList.length > 0
      }
    },
  },
  created() {
    getSiteList().then(res => this.siteList = res.data)
  },
  watch: {
    curTab() {
      this.searchQuery.settlementIdList = []
      this.searchQuery.transportNo = ''
      this.searchQuery.siteIdList = []
    }
  },
  methods: {
    search() {
      this.$store.commit('setFinanceCheckWaitQuery', {...this.searchQuery, curTab: this.curTab})
      // this.$router.push({path: '/finance/check/wait/index', query: {...this.searchQuery, curTab: this.curTab}})
      this.$router.push({path: '/wait/index'})
    },
    selectSettlement(settlementIds) {
      const selectedSettlements = this.settlementList.filter(({linkmanId}) => {
        let has = false
        settlementIds.forEach(curId => {
          if (linkmanId == curId) {
            has = true
          }
        })
        return has
      })
    },
    getSettlementList(name) {
      if (name != '') {
        this.settlementSearching = true
        getSuggestCompanyList({unionCondition: name}).then(res => {
          this.settlementList = res.data
        }).finally(() => {
          this.settlementSearching = false
        })
      } else {
        this.settlementList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-page { display: flex; flex: 1; justify-content: center;
  .search-wrapper { margin-top: 15vh;
    .title { display: flex; margin-bottom: 30px; justify-content: center; align-items: center; font-size: 18px; color: #141414; font-weight: bold; }
    .condition { display: flex;
      .tabs { display: flex; margin-bottom: 10px; font-size: 16px;
        .tab { margin-right: 25px; padding: 4px 8px; border-bottom: 2px solid transparent; cursor: pointer; }
        .tab.on { border-bottom: 2px solid #1F89EB; }}
      .time { margin-left: 10px;
        ::v-deep .el-date-editor { width: 154px;
          .el-input__inner { height: 34px; padding-left: 20px; padding-right: 0; border: none; }
          .el-input__prefix { left: 0; .el-icon-time { display: flex; align-items: center; }}
          .el-input__suffix .el-input__icon { display: flex; width: 16px; align-items: center; }}}}
    .search { display: flex; width: 620px;
      .input { flex: 1;
        ::v-deep .el-input__inner { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }}
      .btn {
        ::v-deep { border-top-left-radius: 0; border-bottom-left-radius: 0; }}}}}
</style>